// 创建一个路由器，并暴露出去
// 1.引入
import { createRouter,createWebHistory } from "vue-router";

// 引入可能要呈现的组件
// 路由组件一般放在pages/views文件夹中
// 普通组件是通过标签引入使用，但路由组件不需要
import Home from "@/pages/Home.vue";
import News from "@/pages/News.vue";
import About from "@/pages/About.vue";
import Details from "@/pages/details.vue";

// 2.创建路由器
const router = createRouter({
  history:createWebHistory(), 
  // 一个一个的路由规则
  routes:[
    {
      name:'xinwen',
      path:'/news',
      component:News,
      children:[
        {
          name:'xiangqing',
          path:'detail/:id/:title/:content?',   //params传参需要先占位
          component:Details,


          // 底层原理跟普通组件一样，在标签中传，但因为没有标签，所以特殊
          // 第一种写法：将路由收到的所有params参数作为props传给路由组件
          // props:true

          // 第二种写法：函数形式，可以自己决定将什么作为props传递，可以传递query,也可以传递params
          props(route){
            // console.log('----',route);
            return route.params
          }

          // 第三种写法：对象形式,固定内容
          // props:{
          //   id:1,
          //   title:2,
          //   content:3
          // }

        }
      ]
    },
    {
      name:'shouye',
      path:'/home',
      component:Home
    },
    
    {
      name:'guanyu',
      path:'/about',
      component:About
    },
    {
      path:'/',
      redirect:'/home'  //重定向，上来就是首页，指定的位置上来定位到另一位置
    },
  ]
})
export default router